<template>
    <div>
        <a-modal
        :dialog-style="{ top: '20px' }"
         v-model:visible="visible" 
         :title="formState.id?(formState.view?'查看':'编辑'):'新增'" 
         @ok="handleOk" 
         @cancel="visible = false"
         class="enterprise-add-edit-modal-10"
         :width="1000"
         :footer="null"
        >
            <div v-if="visible">
                <a-form :form="form" layout="horizontal" class="add-edit-form">
                    <a-form-item label="受委托人姓名">
                        <a-input
                        v-model:value="formState.fswtrxm"
                        placeholder="请输入受委托人姓名"
                        v-decorator="[
                            'fswtrxm', { initialValue:formState.fswtrxm, rules: rules.fswtrxm}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="委托人姓名">
                        <a-input
                        v-model:value="formState.fwtrxm"
                        placeholder="请输入委托人姓名"
                        v-decorator="[
                            'fwtrxm', { initialValue:formState.fwtrxm, rules: rules.fwtrxm}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="委托单位" class="flex-05-box">
                        <a-input 
                            placeholder="请输入委托单位"
                            v-model:value="formState.fwtdw"
                            v-decorator="[
                            'fwtdw', { initialValue:formState.fwtdw, rules: rules.fwtdw}
                            ]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="委托时间" class="flex-05-box">
                        <a-date-picker 
                            style="width: 100%;"
                            v-model:value="formState.fwtsj" 
                            placeholder="请选择委托时间"
                            v-decorator="[
                            'fwtsj', { initialValue:formState.fwtsj, rules: rules.fwtsj}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="委托原因" class="flex-1-box">
                        <a-textarea 
                            placeholder="请输入委托原因"
                            v-model:value="formState.fwtyy"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            v-decorator="[
                            'fwtyy', { initialValue:formState.fwtyy, rules: rules.fwtyy}
                            ]"
                        ></a-textarea>
                    </a-form-item>
                    <a-form-item label="委托说明" class="flex-1-box">
                        <a-textarea 
                            placeholder="请输入委托说明"
                            v-model:value="formState.fwtsm"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            v-decorator="[
                            'fwtsm', { initialValue:formState.fwtsm, rules: rules.fwtsm}
                            ]"
                        ></a-textarea>
                    </a-form-item>
                    
                    <a-form-item label="工作单位" class="flex-05-box">
                        <a-input 
                            placeholder="请输入工作单位"
                            v-model:value="formState.fgzdw"
                            v-decorator="[
                            'fgzdw', { initialValue:formState.fgzdw, rules: rules.fgzdw}
                            ]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="联系电话" class="flex-05-box">
                        <a-input 
                            placeholder="请输入联系电话"
                            v-model:value="formState.flxdh"
                            v-decorator="[
                            'flxdh', { initialValue:formState.flxdh, rules: rules.flxdh}
                            ]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item label="所在地址" class="flex-1-box">
                        <a-input 
                            placeholder="请输入所在地址"
                            v-model:value="formState.fszdz"
                            v-decorator="[
                            'fszdz', { initialValue:formState.fszdz, rules: rules.fszdz}
                            ]"
                        ></a-input>
                    </a-form-item>
                </a-form>
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import moment from 'moment'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fswtrxm: [{
                    required: true,
                    message: '请输入受委托人姓名',
                    trigger: 'blur',
                }],
                fwtrxm: [{
                    required: true,
                    message: '请输入委托人姓名',
                    trigger: 'blur',
                }],
                fwtdw: [{
                    required: true,
                    message: '请输入委托单位',
                    trigger: 'blur',
                }],
                fwtsj: [{
                    type:'object',
                    required: true,
                    message: '请选择委托时间',
                    trigger: 'blur',
                }],
                fwtyy: [{
                    required: true,
                    message: '请输入委托原因',
                    trigger: 'blur',
                }],
                fwtsm: [{
                    required: true,
                    message: '请输入委托说明',
                    trigger: 'blur',
                }],
                fgzdw: [{
                    required: true,
                    message: '请输入工作单位',
                    trigger: 'blur',
                }],
                flxdh: [{
                    required: true,
                    message: '请输入联系电话',
                    trigger: 'blur',
                }],
                fszdz: [{
                    required: true,
                    message: '请输入所在地址',
                    trigger: 'blur',
                }],
            },
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            this.formState = {}
            this.formState = {...val,fwtsj:val.fwtsj?moment(val.fwtsj,'YYYY-MM-DD'):''}
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{
                            ...this.formState,
                            ...values,
                            fwtsj:this.formState.fwtsj?moment(this.formState.fwtsj).format('YYYY-MM-DD'):'',
                        },val)
                    }else{
                        this.$emit('addItem',{
                            ...this.formState,
                            ...values,
                            fwtsj:this.formState.fwtsj?moment(this.formState.fwtsj).format('YYYY-MM-DD'):'',
                        },val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.enterprise-add-edit-modal-10{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
        }
        .ant-form-item-label{
            width: 100px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .flex-05-box{
            width: 50%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
}
</style>